<template>
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="供应商">
            <el-select v-model="formData.vendorId" placeholder="请选择供应商">
                <el-option v-for="item in vendorData" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
        </el-form-item>
        <el-form-item label="单据号">
            <el-input v-model="formData.id" placeholder="请输入关键字"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="180"/>
        <el-table-column fixed prop="vendorName" label="供应商名称" width="200"/>
        <el-table-column prop="statusX" label="状态" width="120">
            <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.statusX }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="purchaser" label="采购人" width="120"/>
        <el-table-column prop="brief" label="备注" width="100"/>
        <el-table-column prop="totalPrice" label="总价" width="100">
            <template #default="scope">
                ¥ {{ scope.row.totalPrice }}
            </template>
        </el-table-column>
        <el-table-column prop="lastUpdateTime" label="最近更新时间" width="150" :formatter="formatter"/>
        <el-table-column fixed="right" label="操作" width="270">
            <template #default="scope">
                <el-button type="default" size="small" @click="showItemsClick(scope.row)">
                    明细
                </el-button>
                <el-button type="success" v-if="scope.row.status==1" @click="optionClick(scope.row,'同意',5)"
                           size="small">同意
                </el-button>
                <el-button type="danger" v-if="scope.row.status==1" @click="optionClick(scope.row,'拒绝',6)"
                           size="small">拒绝
                </el-button>
                <el-button type="warning" v-if="scope.row.status==5" @click="optionClick(scope.row,'在途',10)"
                           size="small">在途
                </el-button>
                <el-button type="info" v-if="scope.row.status!=15 && scope.row.status!=20"
                           @click="optionClick(scope.row,'作废',20)"
                           size="small">作废
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <br/>
    <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.pageSize"
                   @current-change="currentChange"/>

    <el-drawer v-model="drawer" direction="ltr" size="80%">
        <el-select v-model="areaId" placeholder="Select" @change="areaChange" v-if="tempRow.status === 10">
            <el-option v-for="item in areaData" :label="item.name" :value="item.id"/>
        </el-select>
        <el-table :data="tableData2" style="width: 100%">
            <el-table-column fixed prop="productName" label="商品名称" width="140"/>
            <el-table-column prop="qty" label="采购量" width="80"/>
            <el-table-column prop="qty" label="收货量" width="150" v-if="tempRow.status === 10">
                <template #default="scope">
                    <el-input-number v-model="scope.row.realQty" :min="0" size="small"/>
                </template>
            </el-table-column>
            <el-table-column label="货架" width="150" v-if="tempRow.status === 10">
                <template #default="scope">
                    <el-select v-model="scope.row.shelfId" placeholder="请选择货架" @change="changeSel">
                        <el-option-group
                            v-for="group in wh2shelfData" :key="group.warehouse" :label="group.warehouse">
                            <el-option
                                v-for="item in group.shelfs" :key="item.id" :label="item.shelfName"
                                :value="item.id"/>
                        </el-option-group>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="单价" width="80">
                <template #default="scope">
                    ¥ {{ scope.row.price }}
                </template>
            </el-table-column>
            <el-table-column prop="price" label="总价" width="80">
                <template #default="scope">
                    ¥ {{ (scope.row.price * scope.row.realQty).toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column prop="brief" label="备注" width="80"/>
            <el-table-column label="备注" width="120" v-if="tempRow.status === 10">
                <template #default="scope">
                    <el-input v-model="scope.row.ioBreif" :rows="2" type="textarea" placeholder="请输入说明"/>
                </template>
            </el-table-column>
        </el-table>
        <el-divider/>
        <el-input v-if="tempRow.status === 10" v-model="ioBrief" :rows="2" type="textarea" placeholder="请输入说明"/>
        <el-button type="primary" v-if="tempRow.status === 10" @click="addIO">入库</el-button>
    </el-drawer>
</template>

<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import dayjs from "dayjs";
import {ioApi, poApi, shelfApi, vendorApi, warehouseApi} from '@/api'
import {useRouter} from 'vue-router'

const wh2shelfData:any = ref([])
const areaId = ref(0)
const areaData = ref([])
const drawer = ref(false)
const router = useRouter()
const vendorData: any = ref([{
    name: '所有单据',
    id: ''
}])
const tableData: any = ref([])
const tableData2: any = ref([])
const ioBrief = ref('')
const pageData = reactive({
    total: 0,
    pageSize: 5,
    pageNum: 1
})
const formData = reactive({
    name: '',
    vendorId: '',
    id: ''
})

const currentChange = (num: number) => {
    pageData.pageNum = num
    callPoApi()
}
onMounted(() => {
    callVendorApi()//供应商
    callPoApi()//单据
})
const callVendorApi = () => {
    vendorApi.select.call().then((res: any) => {
        vendorData.value = vendorData.value.concat(res)
    })
}
const callPoApi = () => {
    let vendorId = formData.vendorId === '' ? undefined : formData.vendorId
    let id = formData.id === '' ? undefined : formData.id
    poApi.select.call({
        id: id,
        vendorId: vendorId,
        pageSize: pageData.pageSize,
        pageNum: pageData.pageNum
    }).then((res: any) => {
        tableData.value = res.items
        pageData.total = res.total
    })
}

const formatter = (row: any, column: any, cellValue: any, index: any) => {
    if (column.property === "lastUpdateTime") {
        return dayjs(cellValue).format('YY/MM/DD HH:mm')
    }
}


const onSubmit = () => {
    pageData.total = 0
    callPoApi()
}
//-------------区域------------------
const callAreaApi = () => {
    warehouseApi.area_select.call().then((res: any) => {
        areaData.value = res
        areaId.value = res[0].id
    })
}

const areaChange = () => {
    callShelfApi()
}
//-------------仓库------------------
const callShelfApi = () => {
    shelfApi.select_wh2_shelf.call({areaId: areaId.value == 0 ? undefined : areaId.value}).then((res: any) => {
        wh2shelfData.value=res
    })
}


//查看明细
let tempRow = null
const showItemsClick = (row: any) => {

    callAreaApi()
    drawer.value = true
    tempRow = row
    poApi.select_items.call({poId: row.id}).then((res: any) => {
        res.forEach((item) => {
            item.realQty = item.qty
        })
        tableData2.value = res
    })

}

const getStatusType = (status: number) => {
    let type = "info"
    switch (status) {
        case 1:
            type = "danger"
            break;
        case 5:
            type = "success"
            break;
        case 10:
            type = "warning"
            break;
    }
    return type
}


const optionClick = (row: any, optionName: string, status: number) => {

    ElMessageBox.confirm(
        '你确定要' + optionName + row.id + '吗？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            //局部更新
            poApi.patch.call({id: row.id, status: status}).then(() => {
                ElMessage.success("修改" + optionName + '成功')
                callPoApi()
            })
        })
}


const addIO = () => {
    let items: any = []
    tableData2.value.forEach((item: any) => {
        if (item.realQty != 0) {
            items.push({
                productId: item.productId,
                productName: item.productName,
                qty: item.realQty,
                brief: item.ioBreif,
                poItemId: item.id,
                shelfId:item.shelfId
            })
        }
    })
    let body = {
        poId: tempRow.id,
        brief: ioBrief.value,
        items: items
    }
    console.log(body)
    ioApi.insert.call(body).then((res: any) => {
        ElMessage.success("入库成功")
        drawer.value = false
        callPoApi()
    })

}


</script>